<template>
  <div class="home-header">
    <div class="iconfont jt">&#xeb99;</div>
    <div class="input">
      <span class="iconfont fadj">&#xeb9c;</span>
      <input type="text" placeholder="输入城市/景点/游玩主题" />
    </div>
    <!-- <div class="map">
      <router-link to="./city">
        长沙<span class="iconfont">&#xe6aa;</span>
      </router-link>
    </div> -->

    <div class="map" @click="goCity()">
      {{city}}<span class="iconfont">&#xe6aa;</span>
    </div>
  </div>
</template>

<script>
	import {mapState} from "vuex"

  export default {
    name: "home-header",
    methods: {
      goCity() {
        // alert(11111)
        // console.log(this)  this-------router
        this.$router.push("./city")
      }
    },
   computed:{
   	...mapState(["city"])
   }
  }
</script>

<style scoped>
  .home-header {
    height: 2.75rem;
    background-color: #00bcd4;
    display: flex;
    align-items: center;

  }

  .home-header .jt {
    width: 2.5rem;
    text-align: center;
    color: white;
  }

  .home-header .input {
    flex: 1;
    position: relative;
  }

  .home-header .fadj {
    position: absolute;
    top: 0.5rem;
    left: 1rem;
    color: #e4e7ea;
  }

  .home-header input {
    width: 100%;
    height: 1.87rem;
    line-height: 44px;
    border: none;
    border-radius: 0.25rem;
    text-indent: 2.5em;
  }

  .home-header .map {
    width: 64px;
    text-align: center;
    color: white;
  }

  .home-header .map a {
    color: #FFFFFF;
    text-decoration: none;
  }
</style>
